<template>
  <footer class="bg-gray-900 text-white pt-12 pb-8">
    <div class="container mx-auto px-4 sm:px-6">
      <div class="grid grid-cols-2 lg:grid-cols-4 gap-8">
        <!-- 公司信息 (移动端独占一行) -->
        <div class="col-span-2 lg:col-span-1">
          <div class="flex items-center mb-4">
            <img src="/favicon.ico" alt="Company Logo" class="h-8 mr-2">
            <span class="text-lg font-bold">企业名称</span>
          </div>
          <p class="text-gray-400 text-sm mb-4">
            我们致力于为企业提供最先进的数字化解决方案
          </p>
          <div class="flex space-x-3">
            <a v-for="(social, index) in ['wechat', 'weibo', 'linkedin']" :key="index" href="#"
              class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center hover:bg-indigo-600 transition-colors">
              <span :class="`i-carbon-logo-${social}`" class="text-lg"></span>
            </a>
          </div>
        </div>

        <!-- 链接组 (移动端两列) -->
        <div v-for="(group, index) in links" :key="index" class="col-span-1  w-[100%] ">
          <h5 class="text-sm font-semibold uppercase tracking-wider mb-4 ">
            {{ group.title }}
          </h5>
          <!-- 修改这里：移动端和PC端统一使用flex布局 -->
          <ul class="flex flex-wrap space-x-2 ">
            <li v-for="(item, i) in group.items" :key="i">
              <a :href="item.href" class="text-sm text-gray-400 hover:text-white transition-colors inline-block py-1">
                {{ item.name }}
              </a>
            </li>
          </ul>
        </div>

        <!-- 订阅表单 (移动端独占一行) -->
        <!-- <div class="col-span-2 lg:col-span-1">
          <h5 class="text-sm font-semibold uppercase tracking-wider mb-4 text-gray-300">
            订阅通讯
          </h5>
          <p class="text-gray-400 text-sm mb-3">
            获取最新产品资讯和行业动态
          </p>
          <div class="flex flex-col sm:flex-row gap-2">
            <input type="email" placeholder="您的邮箱"
              class="flex-grow px-4 py-2 bg-gray-800 text-white rounded-lg text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500">
            <button
              class="px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm hover:bg-indigo-700 transition-colors whitespace-nowrap">
              订阅
            </button>
          </div>
        </div> -->
      </div>

      <!-- 底部版权信息 -->
      <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col lg:flex-row justify-between items-center">
        <p class="text-gray-400 text-sm mb-3 lg:mb-0">
          © 2023 企业名称. 保留所有权利.
        </p>
        <div class="flex space-x-4 lg:space-x-6">
          <a v-for="(link, index) in ['隐私政策', '服务条款', 'Cookie政策']" :key="index" href="#"
            class="text-gray-400 hover:text-white text-sm transition-colors">
            {{ link }}
          </a>
        </div>
      </div>
    </div>
  </footer>
</template>
<script setup lang="ts">
const links = [
  {
    title: '产品',
    items: [
      { name: '企业ERP', href: '#' },
      { name: '智能CRM', href: '#' },
      { name: '数据分析', href: '#' },
      { name: '云服务', href: '#' }
    ]
  },
  {
    title: '服务',
    items: [
      { name: '咨询', href: '#' },
      { name: '实施', href: '#' },
      { name: '培训', href: '#' },
      { name: '支持', href: '#' }
    ]
  },
  {
    title: '资源',
    items: [
      { name: '文档', href: '#' },
      { name: '博客', href: '#' },
      { name: '案例', href: '#' },
      { name: '活动', href: '#' }
    ]
  }
]
</script>
